import React, { Component } from 'react';
import { IntlProvider, FormattedMessage } from 'react-intl';

const messages = {
  en: {
    greeting: 'Hello, {name}!',
  },
  fr: {
    greeting: 'Bonjour, {name}!',
  },
  es: {
    greeting: '¡Hola, {name}!',
  },
};

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      locale: 'en',
      name: 'John',
    };
  }

  handleLocaleChange = (event) => {
    this.setState({ locale: event.target.value });
  };

  handleNameChange = (event) => {
    this.setState({ name: event.target.value });
  };

  render() {
    const { locale, name } = this.state;

    return (
      <IntlProvider locale={locale} messages={messages[locale]}>
        <div>
          <label htmlFor="locale-select">Select a language:</label>
          <select id="locale-select" value={locale} onChange={this.handleLocaleChange}>
            <option value="en">English</option>
            <option value="fr">French</option>
            <option value="es">Spanish</option>
          </select>
          <br />
          <label htmlFor="name-input">Enter your name:</label>
          <input id="name-input" type="text" value={name} onChange={this.handleNameChange} />
          <br />
          <FormattedMessage id="greeting" values={{ name }} />
        </div>
      </IntlProvider>
    );
  }
}

export default App;